<template>
  <div class="top-menu">
    <div class="top-menu-box">
      <div
        class="top-menu-item"
        v-for="item in menuList"
        :key="item.name"
        :class="{ active: currentRoute === item.name }"
      >
        <router-link :to="item.path">{{ item.title }}</router-link>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { homeRoute } from "@/router/home";
import { useRouter } from "vue-router";
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const currentRoute = computed(() => {
  return route.name;
});

const menuList = computed(() => {
  const menuArr: { title: string; path: string; name: string }[] = [];
  homeRoute.forEach((item) => {
    if (item.children) {
      item.children.forEach((child) => {
        menuArr.push({
          title: (child.meta?.title as string) || "",
          path: child.path,
          name: child.name as string,
        });
      });
    }
  });
  return menuArr;
});
</script>
<style scoped lang="scss">
.top-menu {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0;

  height: 60px;
  overflow: hidden;
  .top-menu-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
    margin: 0 auto;
  }

  .top-menu-item {
    cursor: pointer;
    flex: 1;
    text-align: center;
    line-height: 60px;
    height: 100%;
    position: relative;
    transition: all 0.3s ease;

    a {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      font-weight: 500;
      font-size: 14px;
      display: block;
      height: 100%;
      transition: all 0.3s ease;
      padding: 0 10px;
      border-radius: 4px;
    }

    &:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: translateY(-1px);

      a {
        color: rgba(255, 255, 255, 1);
      }
    }

    &.active {
      background: rgba(255, 255, 255, 0.15);

      a {
        color: #ffffff;
        font-weight: 600;
      }

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 3px;
        background: linear-gradient(90deg, transparent, #ffffff, transparent);
        border-radius: 2px 2px 0 0;
        animation: slideIn 0.3s ease;
      }
    }
  }
}

@keyframes slideIn {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 60%;
    opacity: 1;
  }
}
</style>
